<!DOCTYPE html>
<html lang="zh" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="/css/pc-system/iconfont.css">
    <link rel="stylesheet" href="/css/pc-system/common.css">
    <link rel="stylesheet" href="/css/pc-system/login-password.css?v=2019052901">
    <title>找回密码</title>
</head>
<body ontouchstart>
<div class="login-bk">
    <div class="shadow-bk"></div>
    <div class="login-title">
        {{--<img src="/kaohe/pc-img/kpi-1.png">--}}
        <p>青苜网绩效考核系统</p>
    </div>
    <div class="li-list">
        <ul>
            <li>通讯录</li>
            <li>考勤管理</li>
            <li>业绩管理</li>
            <li>同事验证</li>
            <li>数据导出</li>
            <li style="float: right;">企业VIP</li>
        </ul>
    </div>
    <div class="side-con">
        <form class="weui-cells login-form next-form" onsubmit="return false;">
            <h3 class="form-title">找回密码</h3>
            <div class="weui-cell">
                <div class="weui-cell__hd"><i class="icon iconfont icon-user"></i></div>
                <div class="weui-cell__bd">
                    <input type="text" name="username" id="username" class="input-text" placeholder="请输入手机号/邮箱" />
                </div>
            </div>
            <div class="weui-cell verify-sec">
                <div class="weui-cell__hd">
                    <input type="text" name="verify" id="verify" class="input-text" placeholder="请输入手机验证码" />
                </div>
                <div class="weui-cell__bd">
                    <input type="button" value="获取" class="verify_code" />
                </div>
            </div>
            <button type="button" class="weui-btn weui-btn_color next-btn"/>下一步</button>
            <div class="middle-center"><span>已有账号？</span><a href="/front/login">立即登录</a></div>
        </form>
        <form class="weui-cells login-form pass-form" onsubmit="return false;">
            <h3 class="form-title">找回密码</h3>
            <div class="weui-cell">
                <div class="weui-cell__hd"></div>
                <div class="weui-cell__bd">
                    <input type="password" name="password" id="password" class="input-text" placeholder="请输入新密码" />
                </div>
            </div>
            <div class="weui-cell">
                <div class="weui-cell__hd"></div>
                <div class="weui-cell__bd">
                    <input type="password" name="newpassword" id="newpassword" class="input-text" placeholder="请再次输入新密码" />
                </div>
            </div>
            {!! csrf_field() !!}
            <button type="button" class="weui-btn weui-btn_color sure-btn"/>确认</button>
            <div class="middle-center"><span>已有账号？</span><a href="/front/login">立即登录</a></div>
        </form>

    </div>

</div>
<script src="/js/jquery-2.1.4.min.js"></script>
<script src="/addons/layer/layer.js"></script>
<script>
    $(document).ready(function () {
        //倒计时
        function setTimer(){
            var time=60;
            var timers=setInterval(function(){
                time--;
                if(time <= 0){
                    time=0;
                    $('.verify_code').attr('disabled',false);
                    $('.verify_code').eq(0)[0].b=false;
                    $('.verify_code').val('获取');
                    clearInterval(timers);
                    $('.verify_code').css('font-size','18px')
                    return false;
                }
                $('.verify_code').attr('disabled','disabled');
                $('.verify_code').css('font-size','16px')
                $('.verify_code').val(time + "秒后重试")
            },1000)
        }

        //正则表达式，十一位数字的电话号码
        var phoneReg = /^(0|86|17951)?(13[0-9]|15[012356789]|17[0-9]|18[0-9]|14[57])[0-9]{8}$/;
        //邮箱验证
        var myreg=/^(\w-*\.*)+@(\w-?)+(\.\w{2,})+$/;
        //点击发送验证码按钮，进行倒计时
        var token = $('input[name=_token]').val();
        $('.verify_code').on('click',function(){
            var username = $("#username").val().trim();
            if(username == ''){
                layer.msg('请输入邮箱或手机号!', {time: 1000});
                return false;
            }
            if(!phoneReg.test(username) && !myreg.test(username)){
                layer.msg('请输入正确的手机号/邮箱!', {time: 1000});
                return false;
            }
            if(!this.b){
                setTimer();
                this.b=true;
            }
            $.ajax({
                'url': '/sendmsg?_token='+token,
                'type': 'POST',
                'data': {'phone':username,'type':'1'},//1为忘记密码
                error: function (request) {
                    layer.msg('网络错误!', {time: 1000});
                },
                success: function (data) {
                    if (data.status == 'success') {
                        layer.msg(data.msg, {time: 1000});
                    } else {
                        layer.msg(data.msg, {time: 1000});
                    }
                },
            });
        })


        //下一步
        $('.next-btn').click(function () {
            var username = $("#username").val().trim();
            var verify = $("#verify").val().trim();
            if(username == ''){
                layer.msg("请输入用户名!", {time: 1000});
                return false;
            }
            if(!phoneReg.test(username) && !myreg.test(username)){
                layer.msg("请输入正确的手机号/邮箱!", {time: 1000});
                return false;
            }
            if(verify == ''){
                layer.msg("验证码不能为空!", {time: 1000});
                return false;
            }
            $.ajax({
                url:'/front/password-code?_token='+token,
                type:'post',
                dataType:'json',
                data:{'phone_code':verify,'username':username},
                error: function (request) {
                    layer.msg("网络错误!", {time: 1000});
                },
                success: function (data) {
                    if (data.status == 'success') {
                        layer.msg(data.msg, {time: 1000});
                        $('.next-form').css('display','none');
                        $('.pass-form').css('display','block');
                    } else {
                        layer.msg(data.msg, {time: 1000});
                    }
                },
            });
        })
        //确认提交，修改密码
        $('.sure-btn').click(function () {
            var username = $("#username").val().trim();
            var verify = $("#verify").val().trim();
            var password = $("#password").val().trim();
            var newpassword = $("#newpassword").val().trim();
            var pattern = /^[\w_-]{6,16}$/;
            if(password == '' && newpassword == ''){
                layer.msg("请输入密码!", {time: 1000});
                return false;
            }
            if(!pattern.test(password)){
                layer.msg("最少6位，但不超过16位!", {time: 1000});
                return false;
            }
            if(newpassword !== password){
                layer.msg("两次密码不一致!", {time: 1000});
                return false;
            }
            $.ajax({
                url:'/front/reset-password?_token='+token,
                type:'post',
                dataType:'json',
                data:{'phone_code':verify,'username':username,'password':password,'repassword':newpassword},
                error: function (request) {
                    layer.msg("网络错误!", {time: 1000});
                },
                success: function (data) {
                    if (data.status == 'success') {
                        layer.msg(data.msg+'请重新登录', {time: 1000});
                        setTimeout(function(){ window.location.href=data.redirectUrl; }, 1000);
                    } else {
                        layer.msg(data.msg, {time: 1000});
                    }
                },
            });
        })
    })
</script>
</body>
</html>
